<template>
  <div>
    <!-- <page-search :formConfig="menuFormConfig" @fetchData="getMenuList" /> -->
    <div class="content">
      <table-page v-bind="menuTableConfig">
        <template #status="{ currentrow }">
          <el-button size="small" :type="currentrow.status === 1 ? 'success' : 'danger'" plain>{{
            currentrow.status === 1 ? '上架' : '下架'
          }}</el-button>
        </template>
        <template #createAt="{ currentrow }">
          {{ $filters.formateUtcTime(currentrow.createAt) }}
        </template>
        <template #updateAt="slotProps">
          {{ $filters.formateUtcTime(slotProps.currentrow.updateAt) }}
        </template>
        <template #image="slotProps">
          <el-image
            style="width: 60px; height: 60px"
            :src="slotProps.currentrow.imgUrl"
            :zoom-rate="1.2"
            :preview-src-list="[slotProps.currentrow.imgUrl]"
            :initial-index="4"
            fit="cover"
          />
        </template>
        <template #handler>
          <div class="btns">
            <el-button link>编辑</el-button>
            <el-button link>删除</el-button>
          </div>
        </template>
      </table-page>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import TablePage from '@/components/table/table.vue'

import { menuTableConfig } from './config/table-config'
import { getMenuList } from '@/service/menu/menu'
export default defineComponent({
  components: {
    TablePage
  },
  setup() {
    return {
      menuTableConfig,
      getMenuList
    }
  }
})
</script>

<style scoped>
.content {
  padding-top: 10px;
  background-color: #f5f5f5;
}
</style>
